<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>商品详情</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				margin: 0;
			}
			.card-content{
				margin: 0.625rem;
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
				font-size: medium;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.leavemessage{
				font-size :0.6rem;
			}
			.link{
				font-size :0.6875rem;
				font-weight: bold;
			}
			.freight{
				color: orangered;
				font-size: x-small;
				background-color: lavenderblush;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav" style="background-color: yellow;">
				<a class="icon icon-left" @click="goBack"></a>
			</header>
			
			<!-- 工具栏 -->
			<nav class="bar bar-tab" style="background-color: yellow;" v-if="commodity!=null&&loginUser!=null">
				<a class="tab-item external prompt-ok" href="#" @click="prompt(putleavemessage)">
					<span class="icon iconfont icon-icon_addmessage"></span>
					<span class="tab-label">留言</span>
				</a>
				<a class="tab-item external" href="#" @click="docollect">
					<span class="icon iconfont icon-favor" v-if="collectstatus==false"></span>
					<span class="icon iconfont icon-favorfill" v-else-if="collectstatus==true"></span>
					<span class="tab-label">收藏</span>
				</a>
				<template v-if="commodity.userId==loginUser.id">
					<a class="tab-item external" href="#">
						<button class="button pull-right create-actions" 
						style="margin-right: 1.5rem;background-color: gainsboro;color: black;border-color:gainsboro;">
							管理
						</button>
					</a>
				</template>
				<template v-else-if="commodity.status==0">
					<a class="tab-item external" @click="goTalk">
						<button class="button pull-right" 
						style="margin-right: 1.5rem;background-color: #FF3300;color: white;border-color:#FF3300;">
							我想要
						</button>
					</a>
				</template>
				<template v-else>
					<a class="tab-item external" href="#">
						<button class="button pull-right" 
						style="margin-right: 1.5rem;background-color: gainsboro;color: black;border-color:gainsboro;">
							卖掉了
						</button>
					</a>
				</template>
			</nav>

			<!-- 页面内容 -->
			<div class="content">
				<!-- 主内容 -->
				<div class="list-block">
					<div class="card demo-card-header-pic">
						<div class="card facebook-card" v-if="commodity!=null&&loginUser!=null">
							<div class="card-header no-border">
								<a @click="(commodity.userId==loginUser.id)?goLoginUser():goUser(commodity.userId)">
									<div class="facebook-avatar">
									  <img :src="imgSrc(commodity.user.photo)" width="40" height="40">
									</div>
								</a>
								<div class="facebook-name">{{commodity.user.nickname}}</div>
								<div class="facebook-date" >{{commodity.date}}</div>
							</div>
							<div class="card-content">
								<span class="commodity-price">
									￥{{commodity.price}}
								</span>
								<span class="freight" v-if="commodity.freightStatus==0">
									包邮
								</span>
								<br/>
								<span class="commodity-title">
									{{commodity.title}}<br/>
								</span>
								<span >
									{{commodity.description}}<br/>
								</span>
								<img :src="imgSrc(commodity.picture)" width="100%">
							</div>
						</div>
						<div class="card facebook-card addleave-message">
							<div class="card-header">
								<span class="link">全部留言<br/></span>
							</div>
							<div class="card-header no-border" v-for="leavemessage in leavemessages">
							  <div class="facebook-avatar">
								  <img :src="imgSrc(leavemessage.user.photo)" width="40" height="40" @click="(leavemessage.user.id==loginUser.id)?goLoginUser():goUser(leavemessage.user.id)">
								</div>
							  <div class="facebook-name">{{leavemessage.user.nickname}}</div>
							  <div class="facebook-date" >{{leavemessage.date}}</div>
							  <div>
								<span class="leavemessage">
									{{leavemessage.leavemessage}}<br/>
								</span>
							  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var commodityid = getUrlParam('commodityid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					commodity:null,
					loginUser:null,
					leavemessages:[],
					putleavemessage:{
						leavemessage:null,
						commodityId:null,
						userId:null
					},
					collectstatus:null
				},
				created() {
					//初始化加载商品数据
					this.initcommodity();
					//初始化加载登录用户
					this.initloginuser();
					//初始化加载商品留言
					this.initlleavemessages();
					
				},
				// 方法
				methods:{
					initcommodity: function() {
						axios.get(serviceIP+"/market/initcommodity?commodityid=" + commodityid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.commodity = result.data.data;
						});
					},
					initloginuser: function() {
						axios.get(serviceIP+"/market/initloginuser",{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginUser = result.data.data;
							//初始化加载商品收藏状态
							this.initcollectstatus();
						});
					},
					initlleavemessages: function() {
						axios.get(serviceIP+"/market/initleavemessage?commodityid=" + commodityid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.leavemessages = result.data.data;
							//alert("加载留言");
						});
					},
					initcollectstatus: function() {
						axios.get(serviceIP+"/market/initcollectstatus?commodityid="+commodityid
								+"&loginuserid="+this.loginUser.id,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.collectstatus = result.data.data;
							//alert(result.data.data);
						});
					},
					
					//添加/取消收藏
					docollect:function(){
						axios.get(serviceIP+"/market/changecollectstatus?commodityid="+commodityid
									+"&loginuserid="+this.loginUser.id+"&collectstatus="+this.collectstatus,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							if (result.data.code == 200) {
								//alert(result.data.data)
								$.toast("操作成功!");
								this.collectstatus = result.data.data;
							} else {
								$.toast("操作被打断，请重试！");
							}
						});
					},
					
					//跳转到用户页面
					goUser:function(id){
						// alert(commodity.user.id);
						window.location="market-user.html?userid="+id
					},
					//跳转上层开启页面
					goBack:function(){
						// alert(commodity.user.id);
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//如果是我自己的商品点击跳转我的个人主页
					goLoginUser:function(){
						window.location="market-mypage.html?loginuserid="+this.loginUser.id
					},
					//跳到聊天页
					goTalk:function(){
						window.location="market-talk.html?loginuserid="+this.loginUser.id
						+"&commodityid="+commodityid+"&userid="+this.commodity.userId
					},
					//留言弹框
					prompt:function(putleavemessage){
						var that=this;
						$.prompt('发送留言到星球？', function (value) {
							if(value==null||value==""){
								$.toast("请输入留言后发送");
							}else{
								app.putleavemessage.leavemessage=''+value;
								app.putleavemessage.commodityId=app.commodity.id;
								app.putleavemessage.userId=app.loginUser.id;
								//$.alert("ccc");
								axios.get(serviceIP+"/market/putleavemessage", {
									params: {
										putleavemessage: JSON.stringify(putleavemessage)
									},
									headers:{"token":token,"refreshtoken":refreshtoken}
								}).then(result => {
									if (result.data.code == 200) {
										$.toast("发布成功");
										//window.location="market-commodity.html?commodityid="+commodity.id
										//window.location.reload()
										//重新加载留言
										that.initlleavemessages();
									} else {
										$.toast("啊呀留言被吞掉啦，请重试");
									}
								});
							}
						});
					},
					
					
					
				}
			});
		</script>
		
		<script type="text/javascript" >
			//获取URL参数
			var commodityid = getUrlParam('commodityid');
			
			 $(document).on('click','.create-actions', function () {
			      var buttons1 = [
			        {
			          text: '请选择',
			          label: true
			        },
			        {
			          text: '编辑',
			          onClick: function() {
			            window.location="market-changegoods.html?commodityid="+commodityid
			          }
			        },
					{
					  text: '删除',
					  bold: true,
					  color: 'danger',
					  onClick: function() {
					    $.confirm('确定删除该商品？', function() {
							$.ajax({
								type: 'post',
								url: serviceIP+"/market/deletecommodity",
								dataType: 'json',
									data:{
										commodityid:commodityid
									},
								headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
								success:function (data) {
									if(data.code==200){
										$.toast("删除成功");
										window.history.go(-2)
									}
									else{
										$.toast("删除出错啦，请重试");
									}
								}
							});
					    });
					  }
					},
			      ];
			      var buttons2 = [
			        {
			          text: '取消',
			          bg: 'danger'
			        }
			      ];
			      var groups = [buttons1, buttons2];
			      $.actions(groups);
			  }); 
			  
		</script>
		
		<script>
			$.init();
		</script>
	</body>

</html>
